<template>
   <div>
      <nav-bar>
        <div slot="left" class="back" @click="backClick">
          <img src="~assets/images/common/back.svg" alt="">
        </div>
        <div slot="center" class="detail">
          <span v-for="(item, i) in title" :key="i" :class="{active: currentIndex == i}" @click="itenClick(i)">{{item}}</span>
        </div>
    </nav-bar>
    <detail-item :topImages='topImages'></detail-item>
    <detail-base-info :goods="goods"></detail-base-info>
    <detail-shop-info :shop="shopInfo"></detail-shop-info>
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import DetailItem from './DetailItem'
import DetailBaseInfo from './DetailBaseInfo'
import DetailShopInfo from './DetailShopInfo'

import { getDetail, Goods, Shop } from 'network/detail'
export default {
  name: 'Detail',
  components: {
    NavBar,
    DetailItem,
    DetailBaseInfo,
    DetailShopInfo
  },
  data() {
    return {
      iid: '',
      title: ['商品', '商品', '商品', '商品'],
      currentIndex: 0,
      topImages: [],
      goods: {},
      shopInfo: {}
    }
  },
  methods: {
    itenClick(i) {
      this.currentIndex = i
    },
    backClick() {
      this.$router.go(-1)
    }
  },
  created() {
    // 保存传入的iid
    this.iid = this.$route.params.iid
    // 根据iid请求数据
    getDetail(this.iid).then(res => {
      console.log(res)
      const data = res.result
      this.topImages = data.itemInfo.topImages

      // 获取详情页轮播图下方详情数据
      this.goods = new Goods(data.itemInfo, data.itemInfo, data.shopInfo.services)

      // 获取店铺详情数据
      this.shopInfo = new Shop(data.shopInfo)
    })
  }
}
</script>

<style scoped>
  .detail{
    display: flex;
    justify-content: space-between;
  }
  .active{
    color: hotpink;
  }
  .back img{
    position: relative;
    top: 6px;
  }
</style>
